<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<!--<html>-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--<script type="text/javascript" src="./qwebchannel.js"></script>-->
    <script th:src="@{/ruoyi/qwebchannel.js}"></script>
    <th:block th:include="include :: footer"/>
    <th:block th:include="include :: datetimepicker-js"/>
    <th:block th:include="include :: summernote-js"/>
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script type="text/javascript">
        var _parameter;
        $(document).ready(function () {
            _parameter='[[${parameter}]]';
        });
        //BEGIN SETUP
        //拍照数据（base64）
        var baseUrl;
        var socket;
        var _base64;
        //储存图片路径的变量和数组
        var imgPath = "";
        var imgPathArray = new Array();
        //返回拍照路径
        var arr=new Array();
        //预览图片
        function openImage(imageItem)
        {
            var url = imageItem.parentNode.id;
            window.showModalDialog(url, null, "dialogHeight:800px; dialogWidth:1000px; resizable:no");
        }

        //增加图片缩略图
        function addImgDiv(){
            var container =document.getElementById('container');
            var newchild = document.createElement("div");
            newchild.setAttribute("style", "float:left");
            imgPath = "file://" + imgPath ;
            newchild.setAttribute("id", imgPath);
            imgPathArray.push(imgPath);////增加缩略图时默认把路径加入图片数组
            newchild.innerHTML = "<img width='105' height='85' src='"+imgPath+"' onclick='openImage(this)' /></img><input type='checkbox' checked='checked' onchange='checkboxClicked(this)' />";
            container.appendChild(newchild);
        }

        //清空缩略图
        function removeAll(){
            document.getElementById('container').innerHTML = "";
            imgPathArray = [];
        }
        //处理缩略图CheckBox点击事件
        function checkboxClicked(checkboxItem)
        {
            if(imgPathArray.indexOf(checkboxItem.parentNode.id) < 0)
            {
                imgPathArray.push(checkboxItem.parentNode.id);

            } else{
                var index = imgPathArray.indexOf(checkboxItem.parentNode.id);
                imgPathArray.splice(index, 1);
            }
        }



        function openSocket() {
            socket = new WebSocket(baseUrl);
            socket.onclose = function()
            {
                console.error("web channel closed");
            };
            socket.onerror = function(error)
            {
                console.error("web channel error: " + error);
            };
            socket.onopen = function()
            {
                output("WebSocket start connect");
                new QWebChannel(socket, function(channel) {
                    // make dialog object accessible globally
                    window.dialog = channel.objects.dialog;
                    //网页关闭函数
                    window.onbeforeunload = function() {
                        //发送关闭信号
                        dialog.get_actionType("closeSignal");
                        //关闭socket
                        socket.close();
                    }
                    window.onunload = function() {
                        //发送关闭信号
                        dialog.get_actionType("closeSignal");
                        //关闭socket
                        socket.close();
                    }
                    //反初始化
                    document.getElementById("closeHtml").onclick = function() {
                        dialog.get_actionType("closeSignal");
                        var element = document.getElementById("bigPriDev");
                        element.src = "";
                    };
                    //初始化
                    document.getElementById("openHtml").onclick = function() {
                        dialog.html_loaded("one");
                    };
                    //设备列表点击
                    document.getElementById("devList").onchange = function() {
                        //清除展示信息
                        var resolutionList = document.getElementById("resolutionList");
                        resolutionList.options.length = 0;
                        var modelList = document.getElementById("modelList");
                        modelList.options.length = 0;
                        var select = document.getElementById("devList");
                        dialog.devChanged("primaryDev_:" + select.value);
                    };
                    //模式列表点击
                    document.getElementById("modelList").onchange = function() {
                        //清除展示信息
                        var resolutionList = document.getElementById("resolutionList");
                        resolutionList.options.length = 0;
                        var select = document.getElementById("modelList");
                        dialog.devChanged("primaryDev_:" + select.value);
                    };

                    //分辨率列表点击
                    document.getElementById("resolutionList").onchange = function() {
                        //清除展示信息
                        var select = document.getElementById("resolutionList");
                        dialog.devChanged("primaryDev_:" + select.value);
                    };
                    //打开视频
                    document.getElementById("openPriVideo").onclick = function() {
                        //清除展示信息
                        var resolutionList = document.getElementById("resolutionList");
                        resolutionList.options.length = 0;
                        var modelList = document.getElementById("modelList");
                        modelList.options.length = 0;
                        var select = document.getElementById("devList");
                        dialog.devChanged("primaryDev_:" + select.value);
                    };
                    //关闭视频
                    document.getElementById("closePriVideo").onclick = function() {
                        dialog.get_actionType("closePriVideo");
                        var element = document.getElementById("bigPriDev");
                        element.src = "";
                    };
                    //拍照按钮点击
                    document.getElementById("photographPri").onclick = function() {
                        dialog.photoBtnClicked("primaryDev_");
                        dialog.get_actionType("savePhotoPriDev");

                    };
                    //左转
                    document.getElementById("rotateLeft").onclick = function() {
                        dialog.get_actionType("rotateLeft");
                    };
                    //右转
                    document.getElementById("rotateRight").onclick = function() {
                        dialog.get_actionType("rotateRight");
                    };
                    //属性设置
                    document.getElementById("showProperty").onclick = function() {
                        dialog.get_actionType("showProperty");
                    };
                    //纠偏裁边
                    document.getElementById("setdeskew").onclick = function() {
                        dialog.get_actionType("setdeskew");
                    };
                    //获取文件base64
                    document.getElementById("getFileBase64").onclick = function() {
                        dialog.get_functionTypes("getFileBase64","C:\\12345100.pdf" , "","");
                        //dialog.get_functionTypes("getFileBase64","C:/1234.pdf" , "","");
                    };
                    //图片合成pdf
                    document.getElementById("composePDF").onclick = function() {
                        if(imgPathArray.length > 0)
                        {
                            for (var i = 0; i < imgPathArray.length; i++)
                            {
                                //发送合成pdf图片的路径，第2个参数：图片文件路径，第3，第4个参数为空
                                var path = imgPathArray[i];
                                if(path.indexOf("file:///") >= 0)
                                {
                                    path = path.substr(8);
                                }
                                dialog.get_functionTypes("sendPDFImgPath", path, "","");
                            }
                            //发送合成pdf命令
                            //第2个参数：保存路径，如果该路径不存在则保存在.exe文件下的eloamFile文件夹
                            //第3个参数：保存文件名称，如果为空则按照当前时间命名，
                            //第4个参数为空
                            dialog.get_functionTypes("composePDF", "C:" , "eloamFile\\1234", "");
                        }
                    };
                    //删除本地文件
                    document.getElementById("deleteFile").onclick = function() {
                        //dialog.get_functionTypes("deleteFile", "C:\\Users\\Administrator\\Desktop\\eloamPhoto\\20180903-200102046.jpg", "", "");
                        //dialog.get_functionTypes("deleteFile", "C:/Users/Administrator/Desktop/eloamPhoto/eeee.jpg", "", "");
                        for (var i = 0; i < imgPathArray.length; i++)
                        {
                            //删除文件，第2个参数：图片文件路径，第3，第4个参数为空
                            var path = imgPathArray[i];
                            if(path.indexOf("file:///") >= 0)
                            {
                                path = path.substr(8);
                            }
                            dialog.get_functionTypes("deleteFile", path, "", "");
                        }
                        removeAll();
                        //imgPathArray = [];
                    };
                    //图片保存参数
                    document.getElementById("setImageProperty").onclick = function() {
                        //第二个参数是图片dpi，正整数
                        //第三个参数是图片保存质量：10表示最高质量，1表示较高质量，2表示中等质量,3表示较差质量，4表示差质量
                        //如果参数为空则表示默认
                        dialog.get_functionTypes("setImageProperty", "300" , "", "");
                    };

                    //服务器返回消息
                    dialog.sendPrintInfo.connect(function(message) {
                        //获取文件base64返回值
                        if(message.indexOf("fileBase64:") >= 0)
                        {
                            var value = message.substr(11);
                            alert(value);
                            return;
                        }

                        output(message);
                        //设备信息 priModel
                        if(message.indexOf("priDevName:") >= 0)
                        {
                            message = message.substr(11);
                            var select = document.getElementById("devList");
                            if(message.indexOf("USB") >= 0)
                            {
                                select.add(new Option(message));
                            } else{
                                select.add(new Option(message), 0);
                            }
                            select.selectedIndex=0;
                        }
                        //设备出图格式
                        if(message.indexOf("priModel:") >= 0)
                        {
                            message = message.substr(9);
                            var select = document.getElementById("modelList");
                            if(message.indexOf("MJPG") >= 0)
                            {
                                select.add(new Option(message), 0);
                            } else{
                                select.add(new Option(message));
                            }
                            select.selectedIndex=0;
                        }
                        //设备分辨率
                        if(message.indexOf("priResolution:") >= 0)
                        {
                            message = message.substr(14);
                            var select = document.getElementById("resolutionList");
                            select.add(new Option(message));
                            if(select.options.length > 1)
                            {
                                select.selectedIndex = 1;
                            }
                        }
                        //图片保存后返回路径关键字savePhoto_success:
                        else if(message.indexOf("savePhoto_success:") >= 0)
                        {
                            imgPath = message.substr(18);
                            arr.push(imgPath);
                            //addImgDiv();
                        }
                        //合成pdf成功，返回路径关键字composePDF_success:
                        else if(message.indexOf("composePDF_success:") >= 0)
                        {
                            var path = message.substr(19);
                            removeAll();
                            alert(path);
                        }

                    });
                    //接收图片流用来展示，多个，较小的base64数据
                    dialog.send_priImgData.connect(function(message) {
                        var element = document.getElementById("bigPriDev");
                        element.src = "data:image/jpg;base64," + message;
                    });
                    //接收拍照base64
                    dialog.send_priPhotoData.connect(function(message) {
                        var element = document.getElementById("devPhoto");
                        element.src = "data:image/jpg;base64," + message;
                    });
                    output("ready to send/receive messages!");
                    //网页加载完成信号
                    dialog.html_loaded("one");
                });
            }
        }
        //输出信息
        function output(message){
            var output = document.getElementById("output");
            output.innerHTML = output.innerHTML + message + "\n";
            output.scrollTop = output.scrollHeight;
        }
        //网页初始化函数
        window.onload = function() {
            baseUrl = "ws://127.0.0.1:12345";
            output("Connecting at " + baseUrl + ".");
            openSocket();
        }

        /* 添加用户-选择用户-提交 */
        function submitHandler(index, layero) {
            _base64 = $("#devPhoto").attr("src");
            if (arr.length == 0) {
                $.modal.alertWarning("请至少选择一条记录");
                return;
            }
            $.modal.close();
            parent.photo(_base64,_parameter,arr);
        }
        //END SETUP
    </script>
    <style type="text/css">
        html {
            height: 100%;
            width: 100%;
        }
        #input {
            width: 400px;
            margin: 0 10px 0 0;
        }
        #output {
            width: 500px;
            height: 200px;
            margin: 0 10px 0 0;
        }

    </style>
</head>
<body>
<tr>
    <img id="bigPriDev" width="640" height="480"  /></img>
    <img id="devPhoto" width="360" height="270"  /></img>
    <textarea hidden="hidden" id="output"></textarea><br />
    <br />
</tr>
<tr>
    <input id="openHtml" type="button" value="初始化" />
    <input id="closeHtml" type="button" value="反初始化" />
    <br />
    设备列表：<select id="devList" style="width: 120px" ></select>
    <select id="modelList" style="width: 120px" ></select>
    <select id="resolutionList" style="width: 120px" ></select>
    <input id="openPriVideo" type="button" value="打开主视频" />
    <input id="closePriVideo" type="button" value="关闭主视频"  />
    <input id="photographPri" type="button" value="拍照"  />
    <br />
    <input id="setdeskew" type="checkbox" value="" />纠偏裁边
    <input id="rotateLeft" type="button" value="左转" />
    <input id="rotateRight" type="button" value="右转" />
    <input id="showProperty" type="button" value="属性设置" />
    <input id="composePDF" type="button" value="合成PDF" />
    <input id="deleteFile" type="button" value="删除文件" />
    <input id="getFileBase64" type="button" value="获取文件base64" />
    <input id="setImageProperty" type="button" value="图片保存参数" />
    <br />
    <div id="container" style="float:left;"> </div>
    </td>
</tr>
</body>
</html>
